<template>
  <div class="bao">
    <div class="ang">
      <div class="nav">
        <!-- 导航版心 -->
        <div class="nav-c">
          <!-- 版心左 -->
          <div class="nav-c-lt">
            <span class="logo"><img src="@/assets/img/1.png"
                   alt=""></span>
            <p class="wenhua">做行业先锋,创世界品牌</p>
          </div>
          <!-- 版心右 -->
          <!-- <div class="nav-c-rt">
          <div class="aniu"
               @click='denglu()'>hr登录</div>
          <div class="aniu1"
               @click='denglu1()'>员工登录</div>
        </div> -->
        </div>
      </div>
      <!-- 锚点定位 -->
      <!-- <div id="ding"></div> -->
      <!-- 背景 -->
      <div class="bg">
        <img src="@/assets/img/2.png"
             alt="">
      </div>
      <!-- 分类 -->
      <!-- <div class="fenlei">
      <div class="fenlei-c">
        <div class="f-l-zw"><a @click="ltop">职位:&nbsp;&nbsp;</a><span>1</span> &nbsp;&nbsp;<span>2</span> &nbsp;&nbsp;<span>3</span> &nbsp;&nbsp;<span>4</span> &nbsp;&nbsp;<span>5</span>&nbsp;&nbsp;<span>6</span></div>
      </div>
    </div> -->
      <div class="fenlei">
        <div class="fenlei-c">
          <div class="f-l-zw">
            <!-- <el-autocomplete v-model="state"
                           :fetch-suggestions="querySearchAsync"
                           placeholder="请输入内容"
                           @select="handleSelect"
                           size="small"></el-autocomplete> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 主体内容 -->
    <div class="box">
      <el-card class="box-card"
               style='width:99.9%'
               v-for="(item,index) in arr"
               :key="index">
        <div class="header">
          <div class="lt">{{item.xingming}}</div>
          <div class="lts">{{item.zhiwei}}</div>
          <div class="rt">已到达{{jiedian[item.zhangtai]}}</div>
        </div>
        <div class="footer">
          <el-steps :active="item.zhangtai"
                    align-center>
            <el-step title="20%"
                     description="未查看未查看"></el-step>
            <el-step title="40%"
                     description="已查看未查看"></el-step>
            <el-step title="60%"
                     description="未操作未查看"></el-step>
            <el-step title="80%"
                     description="已操作未查看"></el-step>
            <el-step title="100%"
                     description="节点完成查看"></el-step>

          </el-steps>
        </div>
      </el-card>
    </div>
    <!-- 底部按钮 -->
    <div class="btn">
      <div class="btn-c">
        <el-button-group>
          <el-button icon="el-icon-caret-left"
                     size="small">首页</el-button>
          <el-button icon="el-icon-arrow-left"
                     size="small">上一页</el-button>
          <el-button size="small">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
          <el-button size="small">尾页<i class="el-icon--right el-icon-caret-right"></i></el-button>
        </el-button-group>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      arr: [
        { xingming: "张三", zhiwei: "杀猪", zhangtai: 1 },
        { xingming: "罗翔", zhiwei: "法律顾问", zhangtai: 4 },
        { xingming: "李四", zhiwei: "电工", zhangtai: 3 },
        { xingming: "王二麻子", zhiwei: "普工", zhangtai: 5 },
        { xingming: "张伟", zhiwei: "律政先锋", zhangtai: 3 },
        { xingming: "张老三", zhiwei: "后端工程师", zhangtai: 2 },
        { xingming: "赵老五", zhiwei: "前端工程师", zhangtai: 1 },
        { xingming: "吴老六", zhiwei: "全栈工程师", zhangtai: 2 },
        { xingming: "李甲", zhiwei: "ui工程师", zhangtai: 3 },
        { xingming: "叶乙", zhiwei: "运维工程师", zhangtai: 4 },
      ],
      jiedian: [" ", "节点一", "节点二", "节点三", "节点四", "节点五"],
      active: ''
    }
  },
  methods: {
  }
}
</script>

<style scoped>
/* pc端 */
@media only screen and (min-width: 1200px) {
  .btn {
    width: 100%;
    height: 60px;
  }
  .btn-c {
    margin: 0 auto;
    min-width: 1200px;
    width: 50%;
    top: 100%;
    height: 60px;
    text-align: center;
    line-height: 60px;
  }
  .box .box-card {
    margin-bottom: 10px;
    cursor: pointer;
  }
  .header {
    height: 40px;
    line-height: 40px;
    margin-bottom: 25px;
    padding: 0 20px;
  }
  .lt {
    float: left;
    font-weight: bold;
    font-size: 20px;
    width: 80px;
  }
  .lts {
    float: left;
    font-weight: bold;
    font-size: 20px;
    color: #00c3ff;
    margin-left: 10px;
  }
  .rt {
    float: right;
    font-weight: bold;
    font-size: 20px;
    color: #ff6000;
  }
  div .el-step__head.is-process {
    color: #c0c4cc;
    border-color: #c0c4cc;
  }
  div .el-step__head.is-process {
    color: #c0c4cc;
  }
  div .el-step__description.is-process {
    color: #c0c4cc;
  }
  body {
    overflow: hidden;
  }
  div {
    overflow: hidden;
  }
  .box div {
    overflow: visible;
  }

  .box {
    width: 50%;
    margin: 0 auto;
    margin-top: 96px;
    margin-bottom: 15px;
    min-width: 1200px;
    overflow: visible;
  }
  .nav {
    height: 56px;
    line-height: 56px;
    width: 100%;
    background: #9dd8f7;
    position: fixed;
    z-index: 10;
  }
  .nav-c {
    min-width: 1200px;
    width: 50%;
    margin: 0 auto;
    height: 100%;
  }
  .nav-c-lt {
    height: 56px;
    float: left;
  }

  .logo {
    float: left;
    height: 56px;
  }
  .logo img {
    margin-top: 5px;
  }
  /* .bg {
  background-repeat: no-repeat;
  background-position: center;
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: -1;
}
.bg img {
  width: 100%;
  height: 100%;
} */
  .bg {
    height: 200px;
    width: 100%;
    position: fixed;
    top: 56px;
    left: 0;
    background: #999;
    z-index: -1;
  }
  .bg img {
    width: 100%;
    height: 100%;
  }
  .fenlei {
    height: 40px;
    width: 100%;
    position: fixed;
    top: 56px;
    z-index: 10;
  }
  .fenlei-c {
    margin: 0 auto;
    min-width: 1200px;
    width: 50%;
    background: #b1e3fe;
    top: 100%;
    height: 40px;
  }
  .f-l-zw {
    margin-left: 23px;
    float: right;
    margin-right: 5px;
    line-height: 39px;
  }
  .f-l-zw a {
    text-decoration: none;
    color: blue;
    font-size: 14px;
  }
  .f-l-zw span {
    font-size: 12px;
  }
  .btn {
    width: 100%;
    height: 60px;
  }
  .btn-c {
    margin: 0 auto;
    min-width: 1200px;
    width: 50%;
    top: 100%;
    height: 60px;
    text-align: center;
    line-height: 60px;
  }
  .bao {
    padding-bottom: 55px;
  }
  .side-top {
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    color: #409eff;
    background: #ecf5ff;
  }
}
/* ipad */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .btn {
    width: 100%;
    height: 60px;
  }
  .btn-c {
    margin: 0 auto;
    /* min-width: 1200px; */
    width: 100%;
    top: 100%;
    height: 60px;
    text-align: center;
    line-height: 60px;
  }
  .box .box-card {
    margin-bottom: 10px;
    cursor: pointer;
  }
  .header {
    height: 40px;
    line-height: 40px;
    margin-bottom: 25px;
    padding: 0 20px;
  }
  .lt {
    float: left;
    font-weight: bold;
    font-size: 20px;
    width: 80px;
  }
  .lts {
    float: left;
    font-weight: bold;
    font-size: 20px;
    color: #00c3ff;
    margin-left: 10px;
  }
  .rt {
    float: right;
    font-weight: bold;
    font-size: 20px;
    color: #ff6000;
  }
  div .el-step__head.is-process {
    color: #c0c4cc;
    border-color: #c0c4cc;
  }
  div .el-step__head.is-process {
    color: #c0c4cc;
  }
  div .el-step__description.is-process {
    color: #c0c4cc;
  }
  body {
    overflow: hidden;
  }
  div {
    overflow: hidden;
  }
  .box div {
    overflow: visible;
  }

  .box {
    width: 100%;
    /* margin: 0 auto; */
    margin-top: 96px;
    margin-bottom: 15px;
    /* min-width: 1200px; */
    overflow: visible;
  }
  .nav {
    height: 56px;
    line-height: 56px;
    width: 100%;
    background: #9dd8f7;
    position: fixed;
    z-index: 10;
  }
  .nav-c {
    /* min-width: 1200px; */
    width: 100%;
    margin: 0 auto;
    height: 100%;
  }
  .nav-c-lt {
    height: 56px;
    float: left;
  }

  .logo {
    float: left;
    height: 56px;
  }
  .logo img {
    margin-top: 5px;
  }
  /* .bg {
  background-repeat: no-repeat;
  background-position: center;
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: -1;
}
.bg img {
  width: 100%;
  height: 100%;
} */
  .bg {
    height: 200px;
    width: 100%;
    position: fixed;
    top: 56px;
    left: 0;
    background: #999;
    z-index: -1;
  }
  .bg img {
    width: 100%;
    height: 100%;
  }
  .fenlei {
    height: 40px;
    width: 100%;
    position: fixed;
    top: 56px;
    z-index: 10;
  }
  .fenlei-c {
    margin: 0 auto;
    /* min-width: 1200px; */
    width: 100%;
    background: #b1e3fe;
    top: 100%;
    height: 40px;
  }
  .f-l-zw {
    margin-left: 23px;
    float: right;
    margin-right: 5px;
    line-height: 39px;
  }
  .f-l-zw a {
    text-decoration: none;
    color: blue;
    font-size: 14px;
  }
  .f-l-zw span {
    font-size: 12px;
  }
  .btn {
    width: 100%;
    height: 60px;
  }
  .btn-c {
    margin: 0 auto;
    /* min-width: 1200px; */
    width: 100%;
    top: 100%;
    height: 60px;
    text-align: center;
    line-height: 60px;
  }
  .bao {
    padding-bottom: 55px;
  }
  .side-top {
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    color: #409eff;
    background: #ecf5ff;
  }
}
/* 手机端 */
@media only screen and (max-width: 767px) {
  .btn {
    width: 100%;
    height: 60px;
  }
  .btn-c {
    margin: 0 auto;
    /* min-width: 1200px; */
    width: 100%;
    top: 100%;
    height: 60px;
    text-align: center;
    line-height: 60px;
  }
  /deep/ .el-card__body {
    padding: 10px 0px;
  }
  /deep/ .el-step.is-center .el-step__description {
    padding: 0px;
  }
  .box .box-card {
    margin-bottom: 10px;
    cursor: pointer;
  }
  .header {
    height: 40px;
    line-height: 40px;
    margin-bottom: 10px;
    padding: 0 20px;
  }
  .lt {
    float: left;
    font-weight: bold;
    font-size: 16px;
    /* width: 60px; */
  }
  .lts {
    float: left;
    font-weight: bold;
    font-size: 16px;
    color: #00c3ff;
    margin-left: 20px;
  }
  .rt {
    float: right;
    font-weight: bold;
    font-size: 16px;
    color: #ff6000;
  }
  div .el-step__head.is-process {
    color: #c0c4cc;
    border-color: #c0c4cc;
  }
  div .el-step__head.is-process {
    color: #c0c4cc;
  }
  div .el-step__description.is-process {
    color: #c0c4cc;
  }
  body {
    overflow: hidden;
  }
  div {
    overflow: hidden;
  }
  .box div {
    overflow: visible;
  }

  .box {
    width: 100%;
    /* margin: 0 auto; */
    margin-top: 96px;
    margin-bottom: 15px;
    /* min-width: 1200px; */
    overflow: visible;
  }
  .nav {
    height: 56px;
    line-height: 56px;
    width: 100%;
    background: #9dd8f7;
    position: fixed;
    z-index: 10;
  }
  .nav-c {
    /* min-width: 1200px; */
    width: 100%;
    margin: 0 auto;
    height: 100%;
  }
  .nav-c-lt {
    height: 56px;
    float: left;
  }

  .logo {
    float: left;
    height: 56px;
  }
  .logo img {
    margin-top: 5px;
  }
  /* .bg {
  background-repeat: no-repeat;
  background-position: center;
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: -1;
}
.bg img {
  width: 100%;
  height: 100%;
} */
  .bg {
    height: 200px;
    width: 100%;
    position: fixed;
    top: 56px;
    left: 0;
    background: #999;
    z-index: -1;
  }
  .bg img {
    width: 100%;
    height: 100%;
  }
  .fenlei {
    height: 40px;
    width: 100%;
    position: fixed;
    top: 56px;
    z-index: 10;
  }
  .fenlei-c {
    margin: 0 auto;
    /* min-width: 1200px; */
    width: 100%;
    background: #b1e3fe;
    top: 100%;
    height: 40px;
  }
  .f-l-zw {
    margin-left: 23px;
    float: right;
    margin-right: 5px;
    line-height: 39px;
  }
  .f-l-zw a {
    text-decoration: none;
    color: blue;
    font-size: 14px;
  }
  .f-l-zw span {
    font-size: 12px;
  }
  .btn {
    width: 100%;
    height: 60px;
  }
  .btn-c {
    margin: 0 auto;
    /* min-width: 1200px; */
    width: 100%;
    top: 100%;
    height: 60px;
    text-align: center;
    line-height: 60px;
  }
  .bao {
    padding-bottom: 55px;
  }
  .side-top {
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    color: #409eff;
    background: #ecf5ff;
  }
}
</style>